<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="keywordQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportData">导出</el-button>
        </el-form-item>
        <el-form-item>
          <!-- 默认name="file" -->
          <el-upload class="upload-demo" action="http://localhost:8080/course/importData"
                     :on-success="uploadSuccess" list-type="text">
            <el-button type="success">导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表v-loading="listLoading"-->
    <!--
    el-table - elementUi提供的table组件 - 显示数据
    border - 边框加粗
    :data="tableDatas - 绑定数据 = 数组
    v-loading="listLoading" - 加载框
    @selection-change="handleSelectionChange" - 选项改变的时候触发
    highlight-current-row - 当前行高亮
    style="width: 100%;" - 站父元素的100%
  -->
    <el-table :data="tableDatas" v-loading="listLoading" @selection-change="handleSelectionChange" highlight-current-row
              style="width: 100%;" :row-key="getKey">
      <!--多选框-->
      <!--
    reserve-selection="true",默認为false
    仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
  -->
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column type="index" width="70" label="序号">
      </el-table-column>
      <!--
     prop="realName"  当前列显示哪一个属性值
     label="真实姓名" 标签
     width="120"  当前列的宽度 120px
     fixed="left"  数据在这一列的左边
  -->
      <el-table-column prop="lectureTime" label="日期" width="120">
      </el-table-column>
      <el-table-column prop="week" label="星期" width="120">
      </el-table-column>
      <el-table-column prop="content" label="内容" width="450" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="teacher" label="讲师" width="100">
      </el-table-column>
      <!--<el-table-column prop="remark" label="备注" width="200">
  </el-table-column>-->
      <el-table-column label="操作">
        <template scope="scope">
          <el-button size="small" @click="handleUpdate(scope.row)">编辑</el-button>
          <!--
    type="danger" - 背景颜色
    size="small"   - 尺寸
  -->
          <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" :disabled="this.sels.length === 0" @click="handlePatchDel">批量删除</el-button>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     background
                     :total="totals" style="float:right;">
      </el-pagination>
    </el-col>

    <!--添加和修改的对话框-->
    <!--
      el-dialog - 对话框
      :title="title" - 标题 - 写活了
      :visible.sync="saveFormVisible"  - 控制对话框是否展示，默认不展示。点击的时候展示
      :close-on-click-modal="false" - 点击对话框外面不关闭对话框
  -->
    <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <!--
     :model="saveForm"  - 表单绑定模型数据saveForm
     label-width="80px" - 标签宽度
     ref="saveForm" - 表单验证
  -->
      <el-form :model="saveForm" :rules="rules" label-width="80px" ref="saveForm">
        <el-form-item label="日期">
          <el-input v-model="saveForm.lectureTime" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="星期">
          <el-input v-model="saveForm.week" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="saveForm.content" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="讲师">
          <el-input v-model="saveForm.teacher" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="saveForm.remark" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--    @click.native="saveFormVisible = false 关闭对话框   -->
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    //验证规则：两次密码一致
    var clearValidate = (rule, value, callback) => {
      //内容改变的时候触发  - 为空还会显示校验数据
      this.$refs.saveForm.clearValidate();
      //调了这个方法才会通过表单验证
      callback();
    }
    return {
      //1.分页的相关数据
      tableDatas: [], //当前页数据
      listLoading: false, //默认为false
      currentPage: 1, //当前页
      pageSize: 5,  //每页显示的条数
      totals: 0, //总数量

      //2.高级查询的相关数据
      keyword: '', //默认值

      //3.批量删除的相关数据
      sels: [], //存储多选记录

      //4.添加和修改的相关数据
      title: '',
      saveFormVisible: false, //对话框是否显示
      saveForm: { //表单数据
        id: null,
        lectureTime: null,
        week: '',
        content: '',
        teacher: '',
        remark: ''
      },
      rules: { //表单项的验证规则
        content: [
          {required: true, message: '请输入讲课内容', trigger: 'blur'},
          {validator: clearValidate, trigger: 'change'}
        ]
      },
    }
  },
  methods: {
    //1.查询分页数据
    //获取列表数据
    getTableData() {
      let para = {
        "currentPage": this.currentPage,
        "pageSize": this.pageSize,
        "keyword": this.keyword
      };
      this.listLoading = true; //显示加载圈
      //分页查询
      this.$http.post("/course", para).then(result => {
        //result.data其实就是pageInfo对象
        //给totals赋值 - 用于计算分页栏
        this.totals = result.data.total;
        //给tableDatas赋值 - 用于显示分页数据
        this.tableDatas = result.data.list;
        this.listLoading = false;  //关闭加载框
      });
    },

    //2.点击分页逻辑
    handleCurrentChange(curentPage) {
      this.currentPage = curentPage;
      this.getTableData();
    },
    //1.3.选择每页显示记录条数时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize; //5 - 10
      this.getTableData();
    },

    //3.高级查询
    keywordQuery() {
      //防止页面出现空数据 - 在其他页点击高级查询，但高级查询的结果没有那么多页
      this.currentPage = 1;
      this.getTableData();
    },

    //4.删除单条数据
    handleDel(row) { //row就是当前页数据
      this.$confirm('确定删除此条数据吗？', '请确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/course/" + row.id).then(result => {
          if (result.data.success) {
            this.$message.success("删除成功");
            this.getTableData();
          } else {
            this.$message.error("系统繁忙，请稍后重试【500】")
          }
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试【400,404】")
        })
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },

    //5.选项改变时触发
    handleSelectionChange(val) {
      this.sels = val.map(res => res.id);
    },

    //6.批量删除
    handlePatchDel() {
      this.$confirm('确定删除这些数据吗？', '请确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {//点击确定
        this.$http.patch("/course", this.sels).then(result => {
          if (result.data.success) {
            //打印成功信息
            this.$message.success(result.data.message);
            //重新加载数据
            this.getTableData();
          } else {
            this.$message.error("系统繁忙，请稍后重试【500】")
          }
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试【400,404】")
        })
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },

    //7.点击添加按钮弹出对话框
    handleAdd() {
      this.saveForm = { //重置数据
        id: null,
        lectureTime: null,
        week: '',
        content: '',
        teacher: '',
        remark: ''
      },
          this.title = "添加";
      //显示对话框
      this.saveFormVisible = true;
    },

    //8.点击编辑按钮弹出对话框
    handleUpdate(row) {
      this.title = "修改";
      //将对象拷贝一份赋值给空对象
      this.saveForm = Object.assign({}, row);//回显数据
      this.saveFormVisible = true;//显示编辑框
    },

    //9.提交表单数据
    saveSubmit() {
      this.$http.put("/course", this.saveForm).then(result => {
        //关闭对话框
        this.saveFormVisible = false;
        if (result.data.success) {
          this.$message({
            message: result.data.message,
            type: 'success'
          });
          this.getTableData();
        } else {
          this.$message.error("系统繁忙，请稍后重试【500】")
        }
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试【400,404】")
      })
    },

    //跨分页选中：仅仅是用来区分每一个对象的唯一标识
    getKey(row) {
      return row.id;
    },

    //导出
    exportData() {
      location.href = "http://localhost:8080/course/exportData";
    },

    uploadSuccess() {
      this.getTableData();
    }

  },
  mounted() {
    this.getTableData();
  }
}

</script>

<style scoped></style>
